import {messages} from "share/common";
import React from 'react';
import {connect} from 'react-redux';
import {Card,Tabs, Spin, Popover} from 'antd';
const TabPane = Tabs.TabPane;
import "styles/help-center-user/commom-question.scss"
import commonQuestionService from "containers/help-center-user/common-question/common-question.service";

class CommonQuestion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [],
      activeKey: props.params.id !== ":id" ? props.params.id : null
    };
  }

  componentWillMount() {
    this.getCategoryList();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.params.id !== ":id" && (this.props.params.id !== nextProps.params.id)) {
      this.setState({
        activeKey: nextProps.params.id
      })
    }
  }

  //获取分类列表
  getCategoryList = () => {
    const {activeKey} = this.state;
    this.setState({
      loading: true,
    });
    commonQuestionService.getCategoryList('COMMONPROBLEM', this.props.language.code).then(res => {
      this.setState({
        data: res.data,
        loading: false,
      });
      if(!activeKey && res.data && res.data.length){
        this.setState({
          activeKey: res.data[0].id,
        })
      }
    }).catch(err => {
      this.setState({
        loading: false,
      })
    })
  };


  render() {
    const {data, loading, activeKey} = this.state;
    return (
      <div className={"common-question"}>
        <Spin spinning={loading}>
        {
          data.length ?
        <Tabs tabPosition={'left'}
              style={{fontSize: 18}}
              activeKey={activeKey}
              onChange={(activeKey) => this.setState({activeKey})}>
          {data.map(item => {
            return(
              <TabPane tab={<Popover placement={"topLeft"} content={item.name}>{item.name}</Popover>}
                       key={item.id}>
                {
                  item.commonProblems && item.commonProblems.length ? item.commonProblems.map(ques => {
                    return(
                      <Card key={ques.id}
                            bordered={false}
                            style={{ width: "100%", borderBottom: "1px solid #EBEBEB"}}>
                        <div>
                          <h2 id={ques.id}>{ques.question}</h2>
                          <div dangerouslySetInnerHTML={{__html: ques.answer}}/>
                        </div>
                      </Card>
                    )
                  }) : <div style={{margin: 20}}>{messages('help-center-user.key1')/*暂无内容*/}</div>
                }
              </TabPane>
            )
          })}
        </Tabs>
            : null
        }
        </Spin>
      </div>
    )
  }

}

CommonQuestion.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(CommonQuestion);
